OmarElGabry / chat.io

var app = {

  rooms: function(){

    var socket = io('/rooms', { transports: ['websocket'] });

    // When socket connects, get a list of chatrooms

  chat: function(roomId, username){

    var socket = io('/chatroom', { transports: ['websocket'] });

      // When socket connects, join the current chatroom

      socket.on('connect', function () {

        socket.emit('join', roomId);

        // Update users list upon emitting updateUsersList event

        socket.on('updateUsersList', function(users, clear) {

          $('.container p.message').remove();

          if(users.error != null){

            $('.container').html(`<p class="message error">${users.error}</p>`);

          }else{

            app.helpers.updateUsersList(users, clear);

          }

        });

        // Whenever the user hits the save button, emit newMessage event.

          var textareaEle = $("textarea[name='message']");

          var messageContent = textareaEle.val().trim();

          if(messageContent !== '') {

            var message = { 

              content: messageContent, 

              username: username,

              date: Date.now()

            };

            socket.emit('newMessage', roomId, message);

            textareaEle.val('');

            app.helpers.addMessage(message);

          }

        });

        // Whenever a user leaves the current room, remove the user from users list

        socket.on('removeUser', function(userId) {

          $('li#user-' + userId).remove();

          app.helpers.updateNumOfUsers();

        });

        // Append a new message 

        socket.on('addMessage', function(message) {

          app.helpers.addMessage(message);

        });

      });

  },

  helpers: {

    encodeHTML: function (str){

      return $('<div />').text(str).html();

    },

    // Update rooms list

    updateRoomsList: function(room){

      room.title = this.encodeHTML(room.title);

      var html = `<a href="/chat/${room._id}"><li class="room-item">${room.title}</li></a>`;

      if(html === ''){ return; }

      if($(".room-list ul li").length > 0){

        $('.room-list ul').prepend(html);

      }else{

        $('.room-list ul').html('').html(html);

      }

      this.updateNumOfRooms();

    },

    // Update users list

    updateUsersList: function(users, clear){

        if(users.constructor !== Array){

          users = [users];

        }

        var html = '';

        for(var user of users) {

          user.username = this.encodeHTML(user.username);

          html += `<li class="clearfix" id="user-${user._id}">

                     <img src="${user.picture}" alt="${user.username}" />

                     <div class="about">

                        <div class="name">${user.username}</div>

                        <div class="status"><i class="fa fa-circle online"></i> online</div>

                     </div></li>`;

        }

        if(html === ''){ return; }

        if(clear != null && clear == true){

          $('.users-list ul').html('').html(html);

        }else{

          $('.users-list ul').prepend(html);

        }

        this.updateNumOfUsers();

    },

    // Adding a new message to chat history

    addMessage: function(message){

      message.date      = (new Date(message.date)).toLocaleString();

      message.username  = this.encodeHTML(message.username);

      message.content   = this.encodeHTML(message.content);

      var html = `<li>

                    <div class="message-data">

                      <span class="message-data-name">${message.username}</span>

                      <span class="message-data-time">${message.date}</span>

                    </div>

                    <div class="message my-message" dir="auto">${message.content}</div>

                  </li>`;

      $(html).hide().appendTo('.chat-history ul').slideDown(200);

      // Keep scroll bar down

      $(".chat-history").animate({ scrollTop: $('.chat-history')[0].scrollHeight}, 1000);

    },

    // Update number of rooms

    // This method MUST be called after adding a new room

    updateNumOfRooms: function(){

      var num = $('.room-list ul li').length;

      $('.room-num-rooms').text(num +  " Room(s)");

    },

    // Update number of online users in the current room

    // This method MUST be called after adding, or removing list element(s)

    updateNumOfUsers: function(){

      var num = $('.users-list ul li').length;

      $('.chat-num-users').text(num +  " User(s)");

    }

  }

};